<template>
  <!--线上热门搜索和销售额类别占比模块-->
  <el-row style="margin-top: 10px" type="flex">
<!--    线上热门搜索-->
    <el-col :span="12" style="margin-right: 5px">
      <el-card style="height: 420px">
        <div slot="header">
          <el-row>
            <el-col :span="23">线上热门搜索</el-col>
            <el-col :span="1">
<!--              下拉框-->
              <el-dropdown>
                <span style="font-size: 18px;font-weight: 700;cursor: pointer">...</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>黄金糕</el-dropdown-item>
                  <el-dropdown-item>狮子头</el-dropdown-item>
                  <el-dropdown-item>螺蛳粉</el-dropdown-item>
                  <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                  <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </div>
        <!--        搜索用户数和人均搜索次数折线图-->
        <el-row type="flex">
          <!--          搜索用户数-->
          <el-col :span="12" style="height: 150px;margin-right: 35px">
            <search-detail :option="searchUserOption" num="12321" rate="17.1" title="搜索用户数">
              <template slot="icon">
                <svg class="icon" height="128" p-id="3514" t="1649555944405"
                     version="1.1" viewBox="0 0 1024 1024" width="128" xmlns="http://www.w3.org/2000/svg">
                  <path d="M510.500345 190.796464l426.708452 651.560546L86.79018 842.35701 510.500345 190.796464z"
                        fill="#d81e06" p-id="3515"></path>
                </svg>
              </template>
            </search-detail>
          </el-col>
          <!--          人均搜索次数-->
          <el-col :span="12" style="height: 150px">
            <search-detail :option="peopleOption" num="2.7" rate="26.2" title="人均搜索次数">
              <template slot="icon">
                <svg class="icon" height="128" p-id="4382" t="1649557078115"
                     version="1.1" viewBox="0 0 1024 1024" width="128" xmlns="http://www.w3.org/2000/svg">
                  <path d="M86.79018 188.750875l850.418616 0-426.708452 651.559523L86.79018 188.750875z" fill="#1afa29"
                        p-id="4383"></path>
                </svg>
              </template>
            </search-detail>
          </el-col>
        </el-row>
        <!--        关键字排名表格-->
        <el-table border>
          <el-table-column label="排名"></el-table-column>
          <el-table-column label="搜索关键字"></el-table-column>
          <el-table-column label="用户数" sortable></el-table-column>
          <el-table-column label="周涨幅" sortable></el-table-column>
        </el-table>
<!--        分页器-->
        <el-pagination
          style="margin-top: 20px"
          align="right"
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </el-card>
    </el-col>
<!--    销售类别占比-->
    <el-col :span="12">
      <el-card style="height: 420px">
        <div slot="header">
          <el-row>
            <el-col :span="15">销售类别占比</el-col>
            <el-col :span="9">
              <el-button type="primary" size="mini">全部渠道</el-button>
              <el-button size="mini">线上</el-button>
              <el-button size="mini">门店</el-button>
            </el-col>
          </el-row>
        </div>
<!--        销售额类别占比饼图-->
        <div style="height: 300px;">
          <e-chart-component :option="saleNumRateOption"></e-chart-component>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
// 引入搜索数量卡片
import SearchDetail from './SearchDetail'
// 引入自己的echarts组件
import EChartComponent from '@/views/EChartComponent'
import {mapState} from "vuex";

export default {
  name: "index",
  data() {
    return {
      // 搜索用户数的配置项
      searchUserOption: {
        xAxis: {
          show: false,
          type: 'category',
        },
        yAxis: {
          type: 'value',
          show: false
        },
        grid: {
          left: 0,
          top: 3,
          bottom: 8
        },
        series: [
          {
            data: [2, 1, 4, 3, 2, 3, 2, 1, 3, 4, 2, 5],
            type: 'line',
            smooth: true,
            symbol: 'none', // 取消点
            lineStyle: {
              color: '#5c74e0',
              shadowOffsetY: 5,
              shadowBlur: 15,
              shadowColor: '#1731aaff'
            }
          }
        ]
      },
      // 人均搜索次数配置项
      peopleOption: {
        xAxis: {
          show: false,
          type: 'category',
        },
        yAxis: {
          type: 'value',
          show: false
        },
        grid: {
          left: 0,
          top: 3,
          bottom: 8
        },
        series: [
          {
            data: [4, 2, 2, 1, 3, 5, 3, 4, 1, 2, 3, 4],
            type: 'line',
            smooth: true,
            symbol: 'none', // 取消点
            lineStyle: {
              color: '#5c74e0',
              shadowOffsetY: 5,
              shadowBlur: 15,
              shadowColor: '#1731aaff'
            }
          }
        ]
      },
      // 销售额类别占比配置项
      saleNumRateOption:{
        title:{
          text: '中宅',
          subtext:'1230',
          left:'center',
          top:'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%','70%'],
            left: '1%',
            top:'1%',
            bottom:'1%',
            right: '1%',
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'outside'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            data: [
              {name: '家用电器',value: 244},
              {name:'食品酒水', value:321},
              {name:'个护健康', value: 301},
              {name:'服饰箱包', value: 41},
              {name: '母婴产品',value: 111},
              {name: '其他', value: 69}
            ]
          }
        ]
      }
    }
  },
  components: {
    SearchDetail,
    EChartComponent
  },
  computed:{
    ...mapState('echartsData',['eData'])
  }
}
</script>

<style scoped>
.el-button {
  margin: 0;
}
</style>
